<template>
	<view>
		<view class="block">
			<view class="cell">
				<view class="cell-title"><text class="require">*</text>产品类型：</view>
				<view class="cell-content uni-flex">
					<view class="product-type" @click="productTypeChange(1)" :class="productType==1?'selected-type':''">企业彩铃</view>
					<view class="product-type" @click="productTypeChange(2)" :class="productType==2?'selected-type':''">视频彩铃</view>
				</view>
			</view>
		</view>
		<template v-if="productType==1">
			<view class="block uni-flex align-center" style="padding: 14rpx 30rpx;">
				<textarea placeholder="粘贴客户信息，自动拆分集团名称、联系人、 联系电话、成员号码" @input="bindTextAreaBlur" class="info-text"/>
				<view class="example uni-flex align-center" @click="showExample=true">
					<text>示例</text><uni-icons type="info-filled" color="#5374F7" size="16"></uni-icons>
				</view>
			</view>
			<view class="block" style="padding:12rpx 30rpx;">
				<view class="cell cell-border">
					<view class="cell-title"><text class="require">*</text>集团名称：</view>
					<view class="cell-content">
						<input type="text" placeholder="请输入集团名称" @input="formChange($event,'circleName')" class="cell-input"/>
					</view>
				</view>
				<view class="cell cell-border">
					<view class="cell-title"><text class="require">*</text>联系人：</view>
					<view class="cell-content">
						<input type="text" placeholder="请输入联系人" @input="formChange($event,'adminName')" class="cell-input"/>
					</view>
				</view>
				<view class="cell cell-border">
					<view class="cell-title"><text class="require">*</text>联系电话：</view>
					<view class="cell-content">
						<input type="number" maxlength="11" placeholder="请输入联系电话" @input="formChange($event,'adminPhone')" class="cell-input"/>
					</view>
				</view>
				<view class="cell" style="padding-top: 30rpx;">
					<view class="cell-title"><text class="require">*</text>成员号码：</view>
					<view class="cell-content">
						<view class="number-list clear">
							<view v-for="(item,index) in numberList" :key="index" class="number-item">
								<input type="number" maxlength="11" :value="item.number" @input="numberInput($event,index)" placeholder="请输入…">
								<image v-if="item.number&&numberList.length>1&&index>0" class="del-number" @click="delNumber(index)" :src="require('./images/del.svg')"></image>
							</view>
							<image @click="addNumber" class="add-number" :src="require('./images/add-number.svg')"></image>
						</view>
						<view class="number-count" v-if="numberCount">{{numberCount}}</view>
					</view>
				</view>
				<view class="cell">
					<view class="cell-title" style="width: 170rpx;"><text class="require">*</text>客户确认函：</view>
					<view class="cell-content uni-flex justify-between align-center">
						<view class="uni-flex align-center" style="width:200rpx;flex-grow:1;">
							<view class="upload-btn" @click="uploadImage">点击上传</view>
							<view class="file-name">{{imgName}}</view>
						</view>
						<view @click="saveFile('https://img.xnhkfpt.com/lvdata/CRM_TEMPLATE.xls')" class="template-download uni-flex justify-between align-center">
							模板下载<view class="download-icon"><uni-icons class="center" type="arrow-down" color="#fff" size="8"></uni-icons></view>
						</view>
					</view>
				</view>
			</view>
			<view class="block" style="padding: 17rpx 30rpx;">
				<view class="cell cell2">
					<view class="cell-title">铃音：</view>
					<view class="cell-content uni-flex align-center">
						<div class="view uni-flex">
							<radio-group @change="formChange($event,'isnotAddRing')">
								<label class="radio"><radio color="#5479E3" value="1" checked="true" />自带铃音</label>
								<label class="radio"><radio color="#5479E3" value="0" />不上传</label>
							</radio-group>
						</div>
						<view class="ring-desc" @click="showRingDesc=true">说明</view>
					</view>
				</view>
				<view class="cell cell2" v-if="form.isnotAddRing==1">
					<view class="cell-title">铃音文件：</view>
					<view class="cell-content uni-flex align-center">
						<view class="upload-btn" @click="uploadRing">点击上传</view>
						<view class="file-name">{{ringName}}</view>
					</view>
				</view>
			</view>
			<view class="block" style="padding: 12rpx 30rpx;">
				<view class="cell cell2">
					<view class="cell-title">音频内容：</view>
					<view class="cell-content uni-flex">
						<input type="text" placeholder="请输入…" @input="formChange($event,'RING_CONTENT')" class="cell-input"/>
					</view>
				</view>
			</view>
		</template>
		
		<template v-if="productType==2">
			<view class="block uni-flex align-center" style="padding: 14rpx 30rpx;">
				<textarea placeholder="粘贴客户信息，自动拆分集团名称、联系人、 联系电话、成员号码" @input="bindTextAreaBlur" class="info-text"/>
				<view class="example uni-flex align-center" @click="showExample=true">
					<text>示例</text><uni-icons type="info-filled" color="#5374F7" size="16"></uni-icons>
				</view>
			</view>
			<view class="block" style="padding:12rpx 30rpx;">
				<view class="cell cell-border">
					<view class="cell-title"><text class="require">*</text>集团名称：</view>
					<view class="cell-content">
						<input type="text" placeholder="请输入集团名称" @input="formChange($event,'circleName')" class="cell-input"/>
					</view>
				</view>
				<view class="cell cell-border">
					<view class="cell-title"><text class="require">*</text>联系人：</view>
					<view class="cell-content">
						<input type="text" placeholder="请输入联系人" @input="formChange($event,'adminName')" class="cell-input"/>
					</view>
				</view>
				<view class="cell cell-border">
					<view class="cell-title"><text class="require">*</text>联系电话：</view>
					<view class="cell-content">
						<input type="number" maxlength="11" placeholder="请输入联系电话" @input="formChange($event,'adminPhone')" class="cell-input"/>
					</view>
				</view>
				<view class="cell" style="padding-top: 30rpx;">
					<view class="cell-title"><text class="require">*</text>成员号码：</view>
					<view class="cell-content">
						<view class="number-list clear">
							<view v-for="(item,index) in numberList" :key="index" class="number-item">
								<input type="number" maxlength="11" :value="item.number" @input="numberInput($event,index)" placeholder="请输入…">
								<image v-if="item.number&&numberList.length>1&&index>0" class="del-number" @click="delNumber(index)" :src="require('./images/del.svg')"></image>
							</view>
							<image @click="addNumber" class="add-number" :src="require('./images/add-number.svg')"></image>
						</view>
						<view class="number-count" v-if="numberCount">{{numberCount}}</view>
					</view>
				</view>
			</view>
			<view class="block" style="padding: 17rpx 30rpx;">
				<view class="cell cell2">
					<view class="cell-title">铃音：</view>
					<view class="cell-content uni-flex align-center">
						<div class="view uni-flex">
							<radio-group @change="formChange($event,'isnotAddRing')">
								<label class="radio"><radio color="#5479E3" value="1" checked="true" />自带铃音</label>
								<label class="radio"><radio color="#5479E3" value="0" />不上传</label>
							</radio-group>
						</div>
						<view class="ring-desc" @click="showRingDesc=true">说明</view>
					</view>
				</view>
				<template v-if="form2.isnotAddRing==1">
					<view class="cell cell2">
						<view class="cell-title">视频文件：</view>
						<view class="cell-content uni-flex">
							<view class="upload-btn" @click="uploadVideo">点击上传</view>
							<view class="file-name">{{videoName}}</view>
						</view>
					</view>
					<view class="cell cell2">
						<view class="cell-title">铃音文件：</view>
						<view class="cell-content uni-flex">
							<view class="upload-btn" @click="uploadRing">点击上传</view>
							<view class="file-name">{{ringName}}</view>
						</view>
					</view>
				</template>
			</view>
			<view class="block" style="padding: 12rpx 30rpx;">
				<view class="cell cell2">
					<view class="cell-title">音频内容：</view>
					<view class="cell-content uni-flex">
						<input type="text" placeholder="请输入…" @input="formChange($event,'ringcontext')" class="cell-input"/>
					</view>
				</view>
			</view>
		</template>
		
		<view class="bottom-btns uni-flex">
			<view class="bottom-btn" @click="back">取消</view>
			<view class="bottom-btn submit" @click="validateForm">提交</view>
		</view>
		<popup :show="showRingDesc" :showCloseBtn="true" title="说明" :stopClose="true" @closePopup="showRingDesc=false">
			<view style="padding-bottom: 20rpx;">
				<view class="ring-desc-para" v-for="item in ringDesc">{{item}}</view>
			</view>
		</popup>
		
		<popup extraStyle="background:transparent;border-radius:none;overflow:visible;" :show="showExample" :showCloseBtn="true" :stopClose="true" @closePopup="showExample=false">
			<view>
				<view class="block">
					<view class="example-text">浙江xx科技有限公司，张三，138xxxx1234、138xxxx1231、138xxxx1232</view>
				</view>
				<view class="block" style="padding:12rpx 30rpx;">
					<view class="cell cell-border">
						<view class="cell-title"><text class="require">*</text>集团名称：</view>
						<view class="cell-content">
							<input type="text" disabled="true" value="浙江xx科技有限公司" placeholder="请输入集团名称" class="cell-input"/>
						</view>
					</view>
					<view class="cell cell-border">
						<view class="cell-title"><text class="require">*</text>联系人：</view>
						<view class="cell-content">
							<input type="text" disabled="true" value="张三" placeholder="请输入联系人" class="cell-input"/>
						</view>
					</view>
					<view class="cell cell-border">
						<view class="cell-title"><text class="require">*</text>联系电话：</view>
						<view class="cell-content">
							<input type="number" disabled="true" value="138xxxx1234" placeholder="请输入联系电话" class="cell-input"/>
						</view>
					</view>
					<view class="cell" style="padding-top: 30rpx;">
						<view class="cell-title"><text class="require">*</text>成员号码：</view>
						<view class="cell-content">
							<view class="number-list clear">
								<view class="number-item">
									<input type="number" disabled="true" value="138xxxx1231" placeholder="请输入…">
									<image class="del-number" :src="require('./images/del.svg')"></image>
								</view>
								<view class="number-item">
									<input type="number" disabled="true" value="138xxxx1232" placeholder="请输入…">
									<image class="del-number" :src="require('./images/del.svg')"></image>
								</view>
							</view>
							<view class="number-count">联通1个，移动1个、电信0个、固话0个</view>
						</view>
					</view>
				</view>
			</view>
		</popup>
		
		<uni-popup ref="payPopup" type="dialog">
			<uni-popup-dialog  mode="input" title="支付" cancelText="取消" confirmText="确定"  @confirm="payConfirm">
				<view class="self-popup-content">
					<view class="pay-para">您的铃音包含视频彩铃，需支付运营费</view>
					<view class="pay-para uni-flex">
						<view class="pay-para-title">运营费：</view>
						<view class="pay-para-content">10元</view>
					</view>
					<view class="pay-para uni-flex">
						<view class="pay-para-title">优惠券：</view>
						<view class="pay-para-content uni-flex justify-between">
							<text v-if="!ticketIndex" style="color: #666666;font-weight: normal;">未使用</text>
							<text v-if="ticketIndex">{{couponMoney/100}}元</text>
							<text style="color: #5374F7;font-weight: normal;" @click="useCoupon">使用优惠券</text>
						</view>
					</view>
					<view class="pay-para uni-flex">
						<view class="pay-para-title">待支付：</view>
						<view class="pay-para-content money">10元</view>
					</view>
					<view class="pay-para no-money">余额不足，请在电脑端进行充值</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		
		<uni-popup ref="couponPopup" type="dialog">
			<uni-popup-dialog  mode="input" title="选择优惠券" cancelText="取消" confirmText="确定"  @confirm="confirmCoupon">
				<view class="self-popup-content" style="max-height: 400rpx;overflow: auto;">
					<radio-group @change="radioChange">
						<view class="coupon-item uni-flex justify-between" :key="item.discount_myticket_uid" v-for="(item,index) in couponList">
							<text>{{item.discount_ticket_name}}</text>
							<text>{{item.discount_ticket_price/100}}元</text>
							<radio :value="index"/>
						</view>
					</radio-group>
					<view class="no-coupon" v-if="!couponList.length">暂无优惠券</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import qs from 'qs'
	import {baseUrl,checkNumber,saveFile,encryptDes} from '../../common/util.js'
	export default {
		data() {
			return {
				productType:1,
				numberCount:'',
				cmcc_count:0,
				showExample:false,
				showRingDesc:false,
				ticketIndex:'',
				couponMoney:0,
				numberList:[{number:''}],
				msgType:'error',
				messageText:'',
				imgName:'',
				ringName:'',
				videoName:'',
				ringDesc:['1.仅wav,mp3格式音频，时长≤48秒','2.移动 支持铃音文件和视频文件上传','3.铃音文件<1M，时长<48秒，格式需为mp3或wav','4.视频文件<40M，时长<48秒，格式需为mp4'],
				form:{
					circleName:'',
					adminPhone:'',
					adminName:'',
					QUALIFICATIONURL:'http://img.xnhkfpt.com/lvdata/images/uploadFiles/qwvedio/2020-11-05/upload1604556683146.jpg',
					KNOWPAGEURI:'',
					memberPhones:'',
					isnotAddRing:1,
					RING_CONTENT:'',
					RINGNAME:'',
					RINGURL:'',
					ticketuid:'',
				},
				form2:{
					circleName:'',
					adminPhone:'',
					adminName:'',
					qualificationurl:'http://img.xnhkfpt.com/lvdata/images/uploadFiles/qwvedio/2020-11-05/upload1604556683146.jpg',
					protocol:'http://img.xnhkfpt.com/lvdata/images/uploadFiles/qwvedio/2020-11-05/upload1604556683146.jpg',
					memberPhones:'',
					isnotAddRing:1,
					ringcontext:'',
					ringname:'',
					ringurl:'',
					vediourl:'',
					ticketuid:'',
				},
				couponList:[],
			}
		},
		mounted(){
			uni.setStorageSync('token', 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjJmYjY0N2FlYzk4MjRiNDA5MTYyNmMyMTkyOWIyOGIwXzk2MjY2MjQ5Mzg0MTI2MDU0NCJ9.Jj5-LYx4PXooCItFOZG8lFYye2gXebxXf_Pa_PahLXV9qeDdTQKyfvlikxkN-Sm64VRpnIcv-5smrs4V9t69oA')
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			messageToggle(message) {
				this.messageText = message
				this.$refs.message.open()
			},
			radioChange(e){
				this.ticketIndex=e.detail.value
			},
			confirmCoupon(){
				if(this.ticketIndex!==''){
					this[this.productType==1?'form':'form2'].ticketuid=this.couponList[this.ticketIndex].discount_myticket_uid
					this.couponMoney=this.couponList[this.ticketIndex].discount_ticket_price
					console.log(this.couponMoney)
				}
			},
			useCoupon(){
				this.$request.queryCouponList({
					ticketflag: this.productType==1?'ring':'qwvedio',
					credittypeflag: this.productType==1?'ring':'qwvedio',
					type: 1,
					pagenow: 1,
					shownum: 1000,
				}).then(res=>{
					if(res.code==0){
						this.ticketIndex=''
						this.couponList = res.list ? res.list : [],
						this.$refs.couponPopup.open()
					}
				})
				
			},
			productTypeChange(type){
				if(this.productType!=type){
					this.productType=type
					this.imgName=''
					this.videoName=''
					this.ringName=''
					this.form.RINGNAME=''
					this.form.RINGURL=''
					this.form.RING_CONTENT=''
					this.form2.ringcontext=''
					this.form2.ringname=''
					this.form2.ringurl=''
					this.form2.vediourl=''
				}
			},
			formChange(event,prop){
				this[this.productType==1?'form':'form2'][prop]=event.detail.value
			},
			numberInput(event,index){
				this.numberList[index].number=event.detail.value
				if(this.timer){
					clearTimeout(this.timer)
					this.timer=null
				}
				this.timer=setTimeout(()=>{
					var numberList=[]
					this.numberList.forEach(item=>{
						if(item.number&&checkNumber(item.number)){
							numberList.push(item.number)
						}
					})
					this.$request[this.productType==1?'queryPhoneCity':'queryQWVedioPhoneCity']({
						mobile:numberList.join('\n')
					}).then(res=>{
						if(res.code==0){
							this.needZZ=res.zz=='no'
							this.numberCount=res.info
							this.cmcc_count=res.cmcc_count
						}
						this.timer=null
					}).catch(()=>{
						this.timer=null
					})
				},1000)
			},
			addNumber(){
				this.numberList.push({number:''})
			},
			delNumber(index){
				this.numberList.splice(index,1)
			},
			validateForm(){
				var form=this[this.productType==1?'form':'form2']
				console.log(form)
				if(!form.circleName){
					this.messageToggle('请输入集团名称')
					return
				}
				if(!form.adminName){
					this.messageToggle('请输入联系人')
					return
				}
				if(!form.adminPhone){
					this.messageToggle('请输入联系电话')
					return
				}
				var numberList=[]
				this.numberList.forEach(item=>{
					if(item.number&&checkNumber(item.number)){
						numberList.push(item.number)
					}
				})
				if(!numberList.length){
					this.messageToggle('请输入有效的成员号码')
					return
				}
				form.memberPhones=numberList.join('\n')
				if(this.productType==1&&!form.KNOWPAGEURI){
					this.messageToggle('请上传客户确认涵')
					return
				}
				if(form.isnotAddRing==1){
					if(this.productType==1&&(!form.RINGNAME||!form.RINGURL)){
						this.messageToggle('请上传铃音文件')
						return
					}
					if(this.productType==2&&(!form.ringname||!form.ringurl)){
						this.messageToggle('请上传铃音文件')
						return
					}
					if(this.productType==2&&!form.vediourl){
						this.messageToggle('请上传视频文件')
						return
					}
				}
				if((this.productType==1&&!form.RING_CONTENT)||(this.productType==2&&!form.ringcontext)){
					this.messageToggle('请输入铃音内容')
					return
				}
				if(this.cmcc_count&&form.vediourl){
					this.$refs.payPopup.open()
				}else{
					this.saveOrder(form)
				}
			},
			payConfirm(){
				this.saveOrder(this.productType==1?this.form:this.form2)
			},
			saveOrder(form){
				if(this.loading){
					return
				}
				this.loading=true
				this.$request[this.productType==1?'saveOrder':'saveQWVedioOrder'](form)
				.then(res=>{
					console.log(res)
					if(res.code==0){
						uni.navigateTo({
							url:'/pages/groupmanage/groupmanage'
						})
					}else{
						this.messageToggle(res.msg)
					}
					this.loading=false
				}).catch((errorMsg)=>{
					this.messageToggle(errorMsg)
					this.loading=false
				})
			}, 
			saveFile:saveFile,
			uploadRing(){
				wx.chooseMessageFile({
					count:1,
					type:'file',
					extension:['mp3','wav'],
					success:res=>{
						var file = res.tempFiles[0]
						this.messageToggle(file.name)
						this.uploadFile(file.path,this.productType==1?'RINGURL':'ringurl')
						this[this.productType==1?'form':'form2'][this.productType==1?'RINGNAME':'ringname']=file.name
					},
					fail:()=>{
						console.log('fail')
					}
				})
			},
			uploadFile(filePath,prop){
				var queryParams=qs.stringify({
					param: encryptDes(JSON.stringify({
						parampd: '',
						producttype: 'ring'
					})),
					login_name: 'xnhsmallpro'
				});
				uni.uploadFile({
					url: baseUrl + '/tools/btachUpload?'+queryParams,
					filePath:filePath,
					name:'file',
					header: {
						'Authorization': uni.getStorageSync("token"),
					},
				}).then(res=>{
					if(res[1]&&res[1].statusCode==200){
						var data=JSON.parse(res[1].data)
						if(data.code == 0){
							if(data.objlist&&data.objlist[0]&&data.objlist[0].code==0){
								var path=data.objlist[0].uploadpath
								if(prop=='KNOWPAGEURI'){
									this.imgName=data.objlist[0].filename
								}
								if(prop=='RINGURL'||prop=='ringurl'){
									this.ringName=data.objlist[0].filename
								}
								if(prop=='vediourl'){
									this.videoName=data.objlist[0].filename
								}
								this[this.productType==1?'form':'form2'][prop]=path
							}else{
								this.messageToggle('上传失败')
							}
						}else {
							this.messageToggle(data.msg)
						}
					}else{
						this.messageToggle('上传失败')
					}
					
				}).catch(err=>{
					this.messageToggle('上传失败')
				})
			},
			uploadImage(){
				wx.chooseImage({
					count:1,
					success:res=>{
						console.log(res)
						var tempFilePath = res.tempFilePaths[0]
						this.uploadFile(tempFilePath,'KNOWPAGEURI')
					}
				})
			},
			uploadVideo(){
				wx.chooseVideo({
					sourceType:['album', 'camera'],
					compressed:false,
					success:res=>{
						var tempFilePath = res.tempFilePath
						this.uploadFile(tempFilePath,'vediourl')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding: 20rpx 30rpx 114rpx;
		.self-popup-content{
			width: 100%;
			padding: 0 20rpx;
		}
		.pay-para{
			font-size: 26rpx;
			color: #333;
			line-height: 32rpx;
			height: 32rpx;
			margin-bottom: 24rpx;
			&:last-child{
				margin-bottom: 0;
			}
			.pay-para-title{
				width: 104rpx;
			}
			.pay-para-content{
				flex-grow: 1;
				font-weight: bold;
			}
			.money{
				color: #F39800;
			}
		}
		.no-money{
			color: #D52100;
			font-size: 24rpx;
			font-weight: normal;
		}
		.coupon-item{
			font-size: 26rpx;
			color: #333;
			line-height: 32rpx;
			height: 32rpx;
			margin-bottom: 24rpx;
			&:last-child{
				margin-bottom: 0;
			}
			radio{
				zoom: 0.6;
			}
		}
		.no-coupon{
			color: #999;
			font-size: 24rpx;
		}
		.ring-desc-para{
			padding: 0 38rpx;
			font-size: 24rpx;
			line-height: 48rpx;
		}
		.example-text{
			font-size: 22rpx;
			line-height: 30rpx;
			color: #333;
		}
		.block{
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 0 30rpx;
			&:nth-child(1){
				padding: 17rpx 30rpx;
			}
			&:last-child{
				margin-bottom: 0;
			}
			.info-text{
				width: 440rpx;
				height: 60rpx;
				flex-shrink: 1;
				flex-grow: 1;
				font-size: 22rpx;
				line-height: 30rpx;
			}
			.example{
				flex-shrink: 0;
				width: 102rpx;
				border-left: 6rpx solid #ddd;
				height: 40rpx;
				color: #5374F7;
				font-size: 22rpx;
				justify-content: flex-end;
				.uniui-info-filled{
					margin-left: 4rpx;
				}
			}
			.cell{
				display: flex;
				padding: 13rpx 0;
				align-items: flex-start;
				.cell-title{
					width: 146rpx;
					flex-shrink: 0;
					text-align: right;
					font-size: 26rpx;
					height: 50rpx;
					line-height: 50rpx;
					color: #333;
					
					.require{
						color: #D52100;
					}
				}
				.cell-content{
					width: 200rpx;
					min-height: 50rpx;
					line-height: 50rpx;
					flex-grow: 1;
					margin-left: 7rpx;
					.product-type{
						width: 140rpx;
						height: 50rpx;
						background: #fff;
						text-align: center;
						line-height: 48rpx;
						color: #666666;
						font-size: 26rpx;
						border: 1rpx solid #ddd;
						margin-right: 30rpx;
					}
					.selected-type{
						border: none;
						line-height: 50rpx;
						background-color: #5374F7;
						color: #fff;
					}
					.cell-input{
						font-size: 24rpx;
						height: 50rpx;
						color: #333;
					}
					.number-list{
						margin-left: -34rpx;
						margin-top: -24rpx;
					}
					.number-item{
						width: 180rpx;
						height: 50rpx;
						border: 1rpx solid #DDDDDD;
						position: relative;
						margin-left: 34rpx;
						margin-top: 24rpx;
						float: left;
						.del-number{
							position: absolute;
							width: 25rpx;
							height: 25rpx;
							top: -1rpx;
							right: -1rpx;
						}
						input{
							width: 100%;
							height: 100%;
							text-align: center;
							font-size: 22rpx;
							color: #333;
						}
					}
					.add-number{
						width: 46rpx;
						height: 46rpx;
						margin-left: 34rpx;
						margin-top: 24rpx;
						float: left;
					}
					.ring-desc{
						font-size:22rpx;
						color: #5374F7;
					}
					.upload-btn{
						width: 160rpx;
						height: 50rpx;
						background: #fff;
						border: 1px solid #5374F7;
						text-align: center;
						line-height: 48rpx;
						color: #5374F7;
						font-size: 24rpx;
						flex-shrink: 0;
					}
					.file-name{
						color: #999;
						font-size:24rpx;
						margin-left:10rpx;
						flex-grow: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.template-download{
						color: #5374F7;
						font-size: 22rpx;
						.download-icon{
							width: 22rpx;
							height: 22rpx;
							border-radius: 11rpx;
							background-color: #5374F7;
							position: relative;
							margin-left: 10rpx;
							uni-icons{
								width: 16rpx;
								height: 16rpx;
								line-height: 16rpx;
							}
						}
					}
					.number-count{
						color: #F39800;
						font-size: 22rpx;
						margin-top: 10rpx;
					}
					.radio{
						font-size: 24rpx;
						color: #333;
						margin-right: 40rpx;
						radio{
							transform: scale(0.6);
						}
					}
				}
			}
			.cell2{
				padding: 9rpx 0;
			}
			.cell-border{
				border-bottom: 1PX solid #ddd;
			}
		}
		.bottom-btns{
			position: fixed;
			width: 100%;
			height: 98rpx;
			left: 0;
			bottom: 0;
			z-index: 7;
			.bottom-btn{
				width: 50%;
				text-align: center;
				line-height: 98rpx;
				font-size: 30rpx;
				color: #666;
				background-color: #fff;
			}
			.submit{
				color: #5374F7;
				border-left: 1PX solid #ddd;
			}
		}
	}
	.ring-desc-para{
		padding:0 46rpx 20rpx;
		line-height: 48rpx;
		color: #333;
	}
	.info-example{
		font-size: 22rpx;
		line-height: 30rpx;
	}
</style>